<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1: 图片与文字环绕问题</title>
		<style>
			img{
				/*  图片脱离文本流--文字包含在图片周边  */
				float: left;
				margin-right: 50px;    /*  图片与文字链接处有间隙  */
				margin-bottom: 80px;   /*  图片与文字链接处有间隙  */
				margin-top: 50px;
			}
			p{
				font-size: 16px;  /*  页面默认字体尺寸  */
				line-height: 20px; /*  浮动文字，行高无法设定  */
				word-spacing: 5px;
				
			}
		</style>
	</head>
	<body>
		<img src="img/2.png" alt="敖丙" width="250px" height="300px" />
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores labore atque tempora nostrum maxime ipsam iure ducimus ullam nam eos voluptatem eveniet, dignissimos minus quasi. Quaerat quos beatae repudiandae natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum debitis velit, aspernatur cumque, optio quo dignissimos suscipit rerum, accusamus ratione animi reiciendis. Obcaecati eveniet libero sint distinctio, iure fugiat architecto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis aliquam debitis assumenda maxime, quibusdam asperiores, fugit, unde corrupti veritatis est animi totam saepe? Assumenda quis autem quae sunt quam ullam. Lorem ipsum dolor sit amet consectetur, adipisicing elit. In quidem dolorum fugit sunt mollitia repellendus nulla, sint exercitationem dignissimos commodi vitae minima excepturi? Laborum blanditiis porro, libero laboriosam animi ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est unde cum aperiam, illum doloremque deleniti nesciunt perferendis, nobis numquam ipsum minima animi commodi. Nisi aut dicta eligendi optio quos rerum!  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi minus quibusdam odio suscipit sunt omnis incidunt ipsum, explicabo expedita quae repellendus rerum alias facilis eum ducimus praesentium architecto consequatur veritatis?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, error inventore in mollitia, rem a temporibus earum dolorem veniam iusto est officia tempore corrupti architecto omnis? Commodi in labore ut.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam possimus quas ullam tempore, magnam fugit accusantium modi eaque ratione voluptas nobis harum aliquid fuga consectetur ipsum soluta enim quia cupiditate?
		</p>
	</body>
</html>